<template>
  <div class="myRadio">
    <el-radio-group v-model.lazy="childModel"
                    @change="change(childModel)"
                    class="el-form-item-all-input"
    >
      <el-radio v-for="(item,index) in options"
                :key="index"
                :label="item[props.value]"
                :disabled="item.disabled || disabled"
      >
        <span>{{item[props.label]}}</span>
      </el-radio>
    </el-radio-group>
  </div>
</template>

<script>

export default {
  name: 'myRadio',
  props: {
    // 当前绑定值
    model: {
      type: [String, Number],
      require: true
    },
    // 当前选项配置 {label:'显示文本值',value:'当前选项绑定值'}
    props: {
      type: Object,
      default () {
        return {
          label: 'label',
          value: 'value'
        }
      }
    },
    // 当前单选框组选项配置，格式[{label:'选项1',value:1}]
    options: {
      type: Array,
      require: true
    },
    // 当前组件change改变方法
    change: {
      type: Function,
      default (val) {

      }
    },
    // 当前组件是否禁用
    disabled: {
      type: Boolean,
      default () {
        return false
      }
    }
  },
  data () {
    return {
      childModel: this.model
    }
  },
  watch: {
    childModel: function (val) {
      this.$emit('update:model', val)
    },
    model (val) {
      if (val !== this.childModel) {
        this.childModel = val
      }
    }
  },
  methods: {}
}
</script>

<style lang="scss">
</style>
